<template>
    <view class="auntydetail" v-if="info">
        <!--阿姨基本信息，各端展示一样-->
        <view class="p-line">
            <view class="fb-left"><image :src="nurseInformation.photo" /></view>
            <view class="p-right">
                <view class="p-info">
                    <text class="p-type">{{ nurseInformation.name }}</text>

                    <text class="p-wag" v-if="info.price">{{ info.price }}元/月</text>
                </view>
                <view class="p-time">{{ getLine1() }}</view>
                <view class="p-tag nova-flex" style="flex-wrap: nowrap;align-items: flex-start;">
                    <block v-if="nurseInformation.ayauth">
                        <view class="auth-box" v-for="(item, index) in nurseInformation.ayauth" :key="index">{{ item.type||item }}</view>
                    </block>
<!--                    <view class="tag-box" style="flex:1;">
                        <view>期望工作区域:{{ nurseInformation.village }}</view>
                    </view> -->
                </view>
                <view class="p-tag nova-flex" style="flex-wrap: nowrap;align-items: flex-start;">
                    <view class="tag-box" style="flex:1;">
                        <view>期望工作区域:{{ nurseInformation.village }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 阿姨技能描述，各端展示一样 v-if TODO-->
        <!-- 建议使用组件，点击技能项，底部要弹出一个技能详细信息的对话框 -->
        <view class="aunty-skills" v-if="page !== 'gs-recommend'">
            <c-aunty-skill :skillDetails="skillDetails" :skillInformation="skillInformation"></c-aunty-skill>
            <block></block>
        </view>

        <!-- 阿姨技能描述/业主需求描述 TODO，TBD-->
        <view class="match-compare" v-if="page === 'gs-recommend'">
            <c-desc title="技能描述" :arr="skillDetails"></c-desc>
            <!-- <c-desc title="需求描述" :arr="[]"></c-desc> -->
        </view>
        <!-- 公司信息，根据条件展示，应该加v-if -->
        <!-- 建议使用组件（可以在需求单详情中使用），点击查看详情，要弹出公司详细信息的对话框 -->
        <view class="company" v-if="company">
            <c-company :company="company"></c-company>
            <block></block>
        </view>
        <!-- 预约的业主列表
            显示业主头像，电话，推荐按钮，推荐成功之后，此业主显示预约成功，其它业主显示预约失败
         -->
        <view class="yz-appointment" v-if="showAppointList()">
            <uni-section title="预约的业主" :addclasstype="'margin-top:0'"></uni-section>
            <view class="nova-list">
                <view class="nova-row-center li" v-for="(item, index) in appointList" :key="index">
                    <image class="head" :src="item.headimg"></image>
                    <view class="nova-column" style="flex: 1;">
                        <text class="title">{{ item.name }}</text>
                        <text class="text-link" style="margin-top: 20rpx;" @click.stop="makecall(item.contact)">{{ item.contact }}</text>
                    </view>

                    <button v-if="item.aunt_process > 1" class="st">{{ getAppointYzStatus(item) }}</button>
                    <button v-else class="recom" @click.stop="gsApiRecommendYZ(item)">推荐此业主</button>
                </view>
            </view>
        </view>

        <!-- 雇佣的业主，存在多个 -->
        <view class="employees" v-if="showEmployees()"><c-employees :owner="employeeList"></c-employees></view>

        <!-- 评价信息，根据条件展示，应该加v-if -->
        <view class="evaluate" v-if="showEvaluate()">
            <!--            <view>
                <uni-section title="评价" :addclasstype="'margin-top:0'"></uni-section>
                <uni-section @tap="goEvaluateList()" :title="'雇主评价(' + evaluateList.length + ')'" :addclasstype="'margin-top: 0;background: #FFFFFF;border-bottom: none;'">
                    <view class="smarlltxt">
                        更多评价
                        <image src="/static/img/gr.png" class="smarllico"></image>
                    </view>
                </uni-section>
                <uni-list>
                    <uni-list-item
                        v-for="(item, index) in evaluateList"
                        :key="index"
                        :thumb="item.headimg"
                        :show-arrow="true"
                        :title="item.name"
                        :note="item.evaluate_content"
                        :show-badge="true"
                        badge-text="查看详情"
                        badge-type="normal"
                        @tap="goEvaluateDetail(item)"
                    />
                </uni-list>
            </view> -->
            <c-comments :evaluateList="evaluateList"></c-comments>
        </view>

        <!-- 底部按钮区域，dom就两级，不管是什么端，什么状态，按钮都在这个view下 -->
        <!-- ['','已收录','已推荐','试用中','已雇佣','已评价','已追评'] -->
        <view class="button-bar fixed-bottom">
            <!-- #ifdef H5 -->
            <block v-if="resume_id == ''">
                <text class="btn" @tap="goEvaluate()">评价</text>
                <text class="btn btn-invert">已追评</text>
            </block>
            <!-- #endif -->
            <!-- TODO 公司代填写的简历，不可以拨打电话-->

            <!-- 公司端 -->
            <block v-if="role == 3">
                <!-- 公司首页进来的，收录/推荐（这里的推荐是跳推荐需求页面）、拨打 -->
                <block v-if="page == 'gs-home'">
                    <text class="btn" v-if="aunt_status == 0" @tap="gsApiEmploy()">收录</text>
                    <!-- <text class="btn btn-invert" v-else @tap="goRecommend()">推荐业主</text> -->
                    <text class="btn btn-invert" v-else>{{ getAuntyStatus1() || status.st1 }}</text>
                    <view class="btn" @tap="makecall()">
                        <image class="small-icon" src="../../static/img/call.png" />
                        拨打
                    </view>
                </block>
                <!-- 公司我的收录进来的，根据状态值展示状态，或操作按钮：试用、雇佣 -->
                <block v-if="page == 'gs-employ'">
                    <block v-if="aunt_status == 1">
                        <!--                        <text class="btn btn-invert" @tap="goRecommend()">推荐业主</text>
                        <text class="btn" @click="goRecommend()">已录用</text> -->
                        <text v-if="aunt_process > 0" class="btn btn-invert">{{ getAuntyStatus2() }}</text>
                        <text v-else class="btn">已收录</text>
                    </block>
                    <block v-else-if="aunt_status == 2">
                        <text class="btn">已推荐</text>
                        <text class="btn" v-if="nurseInformation.type != 2" @click="probation()">试用</text>
                        <text class="btn" v-else @click="apiEmploy">雇佣</text>
                    </block>
                    <block v-else-if="aunt_status == 3">
                        <text class="btn">已试用</text>
                        <text class="btn" @click="apiEmploy">雇佣</text>
                    </block>
                    <block v-if="aunt_status == 4"><text class="btn">已雇佣</text></block>
                    <block v-if="aunt_status == 5"><text class="btn">已评价</text></block>
                    <block v-if="aunt_status == 6"><text class="btn">已追评</text></block>
                </block>
                <!-- 公司我的接单/需求单详情进来的，推荐（调用接口推荐此阿姨给前一页面的业主）、拨打 -->
                <block v-if="page == 'gs-recommend'">
                    <view class="btn" @tap="makecall()">
                        <image class="small-icon" src="../../static/img/call.png" />
                        拨打
                    </view>
                    <button id="share" open-type="share" v-show="false"></button>
                    <label for="share" class="btn">分享</label>
                    <text class="btn" @click="gsApiRecommend(false)">推荐</text>
                </block>
            </block>
            <!-- 业主端 -->
            <block v-if="role == 2 && aunt_status >= 1">
                <!-- 首页进来的，预约/已预约（）、拨打 -->
                <block v-if="page == 'yz-home' || page == 'yz-focus'">
                    <text class="btn" v-if="aunt_process == 0" @tap="yzApiAppoint()">预约</text>
                    <text class="btn" v-else-if="aunt_process == 1" @tap="yzCancelAppoint()">取消预约</text>
                    <text class="btn" v-else>{{ getAppointStatus() }}</text>
                    <view class="btn" @tap="makecall()">
                        <image class="small-icon" src="../../static/img/call.png" />
                        拨打
                    </view>
                </block>
                <!--我的订单进来的，根据状态值展示操作按钮：退回、试用、雇佣（不试用也可以雇佣吗？TBD）、评价、追评 -->
                <block v-if="page == 'yz-employ'">
                    <block v-if="aunt_status == 1">
                        <text v-if="aunt_process == 0" class="btn" @click="yzApiAppoint()">预约</text>
                        <text v-else class="btn">{{ getAuntyStatus2() }}</text>
                    </block>
                    <block v-else-if="aunt_status == 2">
                        <!-- 单次保洁不需要试用 -->
                        <text v-if="nurseInformation.type != 2" class="btn" @tap="probation()">试用</text>
                        <text v-else class="btn" @click="apiEmploy()">雇佣</text>
                    </block>
                    <block v-else-if="aunt_status == 3">
                        <text class="btn" @click="apiRefuse()">退回</text>
                        <text class="btn" @click="apiEmploy()">雇佣</text>
                    </block>
                    <block v-else-if="aunt_status == 4"><text class="btn" @click="goEvaluate()">评价</text></block>
                    <block v-else-if="aunt_status == 5"><text class="btn" @click="goEvaluate()">添加追评</text></block>
                    <text v-else-if="aunt_status == 6" class="btn">已追评</text>
                </block>
                <!-- 我的关注进来，同首页进来 -->
                <view v-if="page == 'yz-recommend'"></view>
                <!-- 我的分享进来，这是不可能的，无需处理 -->
            </block>
        </view>
        <!-- #ifdef H5 -->
        <button @click="onRecommendSuccess">recommend</button>
        <!-- #endif -->
        <c-popup-tip ref="alert" @confirm="recommend_back"></c-popup-tip>
    </view>
</template>

<script>
import { ownerDetail } from '../../api/api';
import uniSection from '@/components/uni-section/uni-section.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import cCompany from './c-company.vue';
import cAuntySkill from './c-aunty-skill.vue';
import NovaGrid from '../../components/nova/grid.vue';
import NovaGridItem from '../../components/nova/grid-item.vue';
import cDesc from './c-desc.vue';
import cPopupTip from './c-popup-tip.vue';
import cEmployees from './c-employees.vue';
import cComments from './c-comments.vue';
export default {
    components: {
        uniSection,
        uniList,
        uniListItem,
        uniPopup,
        cCompany,
        cAuntySkill,
        cDesc,
        NovaGrid,
        NovaGridItem,
        cPopupTip,
        cEmployees,
        cComments
    },
    data() {
        return {
            publish_id: '',
            resume_id: '',
            company_id: '',
            role: this.$global.role,
            page: '',
            aunt_status: '', //auntyState1: ['','已收录','已推荐','试用中','已雇佣','已评价','已追评'],//阿姨的主线状态
            aunt_process: '',
            info: undefined, // 返回的业务大对象
            company: undefined, //公司信息
            appointList: [], // 预约的业主
            employeeList: [], //雇佣的业主
            evaluateList: [], //评价
            nurseInformation: undefined, //个人信息
            skillDetails: [], //阿姨技能描述
            skillInformation: [], //阿姨技能详情数组
            tips: [], // 标签
            status: {
                st1: '',
                st2: ''
            }
        };
    },
    onLoad(options) {
        console.log('onLoad', options);
        this.company_id = options.company_id;
        this.resume_id = options.resume_id;
        this.page = options.page || '';
        if (options.publish_id) {
            // 可选
            this.publish_id = options.publish_id;
        }
        if (options.aunt_status) {
            //this.aunt_status = parseInt(options.aunt_status);
        }
        if (this.resume_id) {
            if (this.role == 1) {
                // 阿姨端
                this.gsAyDetail(this.resume_id);
            } else if (this.role == 2) {
                // 业主端
                this.yzAyDetail(this.resume_id);
            } else if (this.role == 3) {
                // 家政端
                this.gsAyDetail(this.resume_id);
            }
        } else {
            // #ifdef H5
            this.showAll();
            // #endif
            console.error('请检查resume_id参数');
        }
    },
    onShow() {},
    onShareAppMessage() {
        // 分享 title 需要修改
        return {
            path: `/pages/c/p-aunty-detail?resume_id=${this.resume_id}&company_id=${this.company_id}`,
            title: '分享一位不错的阿姨'
        };
    },
    onBackPress() {
        return false;
    },
    computed: {
        _getAuntyStatus1() {
            let type = this.aunt_status;
            let label = this.$getAuntyStatus1(type);
            console.log('_aunt status', type, label);
            this.status.st1 = label;
            return label;
        }
    },
    methods: {
        showAll() {
            // #ifdef H5
            this.nurseInformation = {};
            this.company = {};
            this.info = {};
            return true;
            // #endif
            // #ifndef H5
            return this.info != undefined;
            // #endif
        },
        // 是否展示公司信息
        showCompany() {
            let show = !!this.company;
            return true;
        },
        // 是否显示预约的业主列表
        showAppointList() {
            // #ifdef H5
            this.appointList = [1];
            return true;
            // #endif
            // #ifndef H5
            return this.page === 'gs-employ';
            // #endif
        },
        showEmployees() {
            return this.page == 'gs-employ' && this.employeeList && this.employeeList.length > 0;
        },
        // 是否显示评价
        showEvaluate() {
            return this.evaluateList && this.evaluateList.length > 0;
        },
        // 拼装出生，工作经验等信息
        getLine1() {
            let arr = [];
            let job = this.nurseInformation;
            if (job) {
                if (job.sex) {
                    arr.push(job.sex);
                }
                if (job.birthday) {
                    arr.push(job.birthday);
                }
                if (job.zodiac) {
                    arr.push(job.zodiac);
                }
                if (job.constellation) {
                    arr.push(job.constellation);
                }
                if (job.area) {
                    arr.push(job.area);
                }
                if (job.workYear) {
                    arr.push(job.workYear + '年工作经验');
                }
            }
            return arr.join(' | ');
        },
        // 获取阿姨状态
        getAuntyStatus1() {
            let type = this.aunt_status;
            let label = this.$getAuntyStatus1(type);
            console.log('aunt status', type, label);
            return label;
        },
        getAuntyStatus2() {
            return this.$getAuntyStatus2(this.aunt_process);
        },
        getAppointYzStatus(item) {
            return this.$getAuntyStatus2(item.aunt_process);
        },
        makecall(tel) {
            if (!tel && this.nurseInformation.telephone) {
                tel = this.nurseInformation.telephone;
            }
            if (tel) {
                wx.makePhoneCall({
                    phoneNumber: tel
                });
            }
        },

        // 更多评价
        goEvaluateList() {
            console.log('更多评价');
        },
        // 家政 首页进来的- 底部按钮-收录，点收录按钮
        async gsApiEmploy() {
            let res = await this.$request.post({
                url: '/house/employ',
                data: {
                    resume_id: this.resume_id
                }
            });
            this.aunt_status = 1;
            let e = {
                resume_id: this.resume_id,
                aunt_status: this.aunt_status,
                aunt_process: this.aunt_process
            };
            console.log('emit gsEmploy', e);
            uni.$emit('auntyStatusChange', e);
            uni.showToast({
                title: '收录成功',
                duration: 2000
            });
        },
        // 公司对其中一个业主推荐
        async gsApiRecommendYZ(yz) {
            let res = await this.$request.post({
                url: '/publish/recommendUser',
                data: {
                    resume_id: this.resume_id,
                    user_id: yz.user_id,
                    company_id: this.nurseInformation.companyId || this.nurseInformation.company_id
                }
            });
            this.$toast('推荐成功');
            this.gsAyDetail(this.resume_id);
        },
        // 公司操作：推荐
        async gsApiRecommend(yz) {
            let res = await this.$request.post({
                url: '/publish/recommendNurse',
                data: {
                    resume_id: this.resume_id,
                    publish_id: yz ? yz.publish_id : this.publish_id
                    //status: this.aunt_status
                }
            });
            this.aunt_status = 2;
            let e = {
                publish_id: this.publish_id,
                aunt_status: this.aunt_status,
                aunt_process: this.aunt_process
            };
            console.log('emit gsRecommendAY', e);
            uni.$emit('jobStatusChange', e);
            if (yz) {
                this.gsAyDetail(this.resume_id);
            } else {
                this.onRecommendSuccess();
            }
        },
        // 家政 首页进来的- 底部按钮-推荐，点推荐按钮
        goRecommend() {
            uni.navigateTo({
                url: '/pages/gs/gs-recomment-job?resume_id=' + this.resume_id
            });
        },

        // 家政 接到/需求页面进来的 推荐 打开弹窗
        onRecommendSuccess() {
            // 调用接口推荐此阿姨给前一页面的业主
            this.$refs.alert.open({ posbtn: '返回接单列表' });
        },
        // 家政 接到/需求页面进来的 推荐 打开弹窗-返回首页
        recommend_back() {
            // 家政公司我的接单/需求单详情进来的，推荐（调用接口推荐此阿姨给前一页面的业主)
            if (this.page == 'gs-recommend') {
                // uni.reLaunch({
                //     url: '/pages/gs/gshome'
                // })
                uni.navigateBack({
                    delta: 3
                });
                uni.$emit('gsRecommendSuccess', { publish_id: this.publish_id, refresh: true });
            } else {
                uni.redirectTo({
                    url: '/pages/gs/gs-accept-jobs'
                });
            }
        },
        goEvaluateDetail(item) {},
        goJobDetail(item) {
            let path = `/pages/c/p-job-detail?resume_id=${this.resume_id}&publish_id=${item.publish_id}`;
            uni.navigateTo({
                url: path
            });
        },
        // 业主端 首页进来的 点预约按钮->已预约
        getAppointStatus(st) {
            if (!st) {
                st = this.aunt_process;
            }
            return this.$getAuntyStatus2(st);
        },
        async yzApiAppoint() {
            let company_id = this.company ? this.company.company_id : this.nurseInformation.company_id || this.nurseInformation.companyId;
            let res = await this.$request.post({
                url: '/publish/orderInsert',
                data: {
                    resume_id: this.resume_id,
                    company_id: company_id
                }
            });

            this.aunt_process = res.aunt_process;
            uni.showToast({
                title: this.aunt_process == 1 ? '预约成功' : '取消预约成功',
                duration: 2000
            });
            let e = {
                resume_id: this.resume_id,
                aunt_process: this.aunt_process,
                aunt_status: this.aunt_status
            };
            console.log('emit yzAppoint', e);
            uni.$emit('auntyStatusChange', e);
        },
        async yzApiCanelAppoint() {
            this.yzApiAppoint();
        },
        yzCancelAppoint() {
            let that = this;
            uni.showModal({
                content: '是否取消预约？',
                success: res => {
                    if (res.confirm) {
                        that.yzApiCanelAppoint();
                    }
                }
            });
        },
        async apiSetStatus(targetStatus) {
            let url = this.role == 3 ? '/publish/publicBackNurse' : '/publish/backNurse';
            let param = {
                job_status: targetStatus,
                publish_id: this.nurseInformation.publish_id,
                resume_id: this.resume_id,
                company_id: this.nurseInformation.company_id
            };
            if (this.role == 3) {
                param.user_id = this.nurseInformation.user_id;
            }
            let res = await this.$request.post({
                url: url,
                data: param
            });
            this.aunt_status = targetStatus;
            let e = {
                resume_id: this.resume_id,
                aunt_status: this.aunt_status,
                aunt_process: this.aunt_process
            };
            console.log('emit statusChange', e);
            uni.$emit('auntyStatusChange', e);
        },
        // 业主端 我的订单进来的 退回按钮
        async apiRefuse() {
            await this.apiSetStatus(1);
            uni.showToast({
                title: '退回成功',
                duration: 2000
            });
        },
        // 业主端 我的订单进来的 雇佣按钮
        async apiEmploy() {
            await this.apiSetStatus(4);
            uni.showToast({
                title: '雇佣成功',
                duration: 2000
            });
        },
        // 业主端 我的订单进来的 试用按钮
        async probation() {
            await this.apiSetStatus(3);
            uni.showToast({
                title: '试用成功',
                duration: 2000
            });
        },
        // 业主端 我的订单进来的 评价按钮
        goEvaluate() {
            uni.setStorage({
                key: 'aunty',
                data: this.nurseInformation,
                success() {
                    uni.navigateTo({
                        url: '../yz/yz-evaluate?aunt_status='
                    });
                }
            });
        },
        // 业主端 我的订单进来的 追评按钮
        // for yz
        async yzAyDetail(id) {
            let param = {
                resume_id: id,
                company_id: this.company_id,
                status: this.aunt_status
            };
            if (this.page == 'yz-employ') {
                param.publish_id = this.publish_id;
            }
            let res = await this.$request.post({
                url: '/owner/ownerDetail',
                data: param
            });
            this.nurseInformation = res.nurseInformation; //阿姨的个人信息
            this.nurseInformation.ayauth = res.auntQualification ? (Array.isArray(res.auntQualification) ? res.auntQualification : [res.auntQualification]) : [];
            this.company = res.company; //公司信息
            this.skillDetails = res.skillDetails || []; //阿姨技能描述
            this.evaluateList = res.evaluateList || []; //评价
            this.skillInformation = res.skillInformation; //阿姨技能详情数组
            this.aunt_status = this.nurseInformation.aunt_status || 0;
            this.aunt_process = this.nurseInformation.aunt_process || 0;
            this.info = res; //返回总json数据

            console.log(`业主端 page = ${this.page} aunt_status = ${this.aunt_status}, aunt_process = ${this.aunt_process}`);
        },
        // 阿姨详情 for gs
        async gsAyDetail(id) {
            let res = null;
            let param = {
                resume_id: id,
                stauts: this.aunt_status
            }
            if (this.page == 'msg') {
                param.company_id = this.company_id
            }
            if (this.page == 'gs-employ') {
                res = await this.$request.post({
                    url: '/publish/employmentNurseDetail',
                    data: param
                });
            } else {
                res = await this.$request.post({
                    url: '/house/nurseDetail',
                    data: param
                });
            }
            this.nurseInformation = res.nurseInformation;
            this.nurseInformation.ayauth = res.auntQualification ? (Array.isArray(res.auntQualification) ? res.auntQualification : [res.auntQualification]) : [];
            this.company = res.company;
            this.skillDetails = res.skillDetails || [];
            this.appointList = res.makeOrder || [];
            this.employeeList = res.orderUser || [];
            this.evaluateList = res.evaluateList || [];
            this.skillInformation = res.skillInformation; //阿姨技能详情数组
            this.aunt_status = this.nurseInformation.aunt_status || 0;
            this.aunt_process = this.nurseInformation.aunt_process || 0;
            this.info = res; //返回总json数据
            console.log(`公司端 page = ${this.page} aunt_status = ${this.aunt_status}, aunt_process = ${this.aunt_process}`);
        }
    }
};
</script>

<style lang="scss">
.auntydetail {
    padding-bottom: 120rpx;
}
.smarlltxt {
    font-size: 24rpx;
    color: #999999;
    .smarllico {
        width: 10rpx;
        height: 17rpx;
        margin-left: 10rpx;
    }
}
.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    border-top: 1rpx solid #e5e5e5;
    box-sizing: border-box;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20rpx;
    padding-right: 20rpx;
    .btn {
        flex: 1;
        background-color: $uni-color-primary;
        height: 70rpx;
        display: inline-flex;
        align-items: center;
        border-radius: 12rpx;
        color: white;
        margin-left: 20rpx;
        margin-right: 20rpx;
        justify-content: center;
        image {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }
    }
    .btn-invert {
        color: $uni-color-primary;
        border: 1rpx solid $uni-color-primary;
        background: none;
    }
}
.p-line {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
    flex-wrap: wrap;
    padding: 30rpx;
    align-items: center;
    .p-right {
        flex: 1;
        .p-info {
            padding-bottom: 20rpx;
            .p-type {
                font-size: 34rpx;
            }
            .p-vil {
                font-size: 26rpx;
                color: #666666;
            }
            .p-wag {
                font-size: 30rpx;
                color: #ff6702;
                float: right;
            }
        }
        .p-time {
            font-size: 26rpx;
        }
        .p-tag {
            padding-top: 20rpx;
            .auth-box {
                margin-right: 10rpx;
                display: inline-block;
                padding: 5rpx 10rpx;
                font-size: 24rpx;
                border: 1rpx solid #ff6702;
                color: #ff6702;
                border-radius: 4rpx;
            }
            .tag-box {
                margin-right: 10rpx;
                display: inline-block;
                view {
                    padding: 5rpx 10rpx;
                    font-size: 24rpx;
                    border: 1rpx solid #ff6702;
                    color: #ff6702;
                    border-radius: 4rpx;
                }
            }
        }
    }
    .fb-left {
        width: 216rpx;
        image {
            width: 168rpx;
            height: 168rpx;
            border-radius: 10rpx;
        }
    }
}
.match-compare {
    border-top: 20rpx solid #f7f7f7;
    border-bottom: 20rpx solid #f7f7f7;
    padding: 0 30rpx;
}
.company_style {
    padding: 0 30rpx;
}
.yz-appointment {
    .li {
        padding: 10rpx 30rpx;
        position: relative;
        &::after {
            @include divider();
        }
        .head {
            width: 90rpx;
            height: 90rpx;
            border-radius: 10rpx;
            background-color: #f2f2f2;
            margin-right: 20rpx;
        }
        .recom {
            background-color: $uni-color-primary;
            color: white;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
        }
        .st {
            height: 60rpx;
            line-height: 60rpx;
            background: none;
            color: $uni-color-primary;
            font-size: 28rpx;
            &::after {
                border-color: $uni-color-primary;
            }
        }
    }
    .li-last {
        position: static;
    }
}
</style>
